<template>
  <div class="container-wrapper">
    <div class="row-padding justify-center container-xxl container-row">
      <div class="row row-padding wrapper">
        <aplusmax-sample-goods v-for="(good, index) in content" :key="index" :good="good"></aplusmax-sample-goods>
      </div>
  </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, reactive} from 'vue'
import {getCategory} from "../../api/category";
import {appStore} from '@/store/app.ts';
const store = appStore()
defineProps({})

const emit = defineEmits([])

defineExpose({})

const content = reactive([
  // {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
  // {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 7, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 8, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 9, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
  // {id: 10, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
]
)
const merge = (obj) => {
  for (const objKey in obj) {
    for (const objElementKey in obj[objKey]) {
      content.push(obj[objKey][objElementKey])
    }
  }

}
const Init =() => {
  console.log(store.category)
  if ((Object.keys((store.category)).length === 0)) {
    getCategory().then((res) => {
      store.setCategory(res.data.category_list)
      merge(store.category)
    }).catch((err) => {
      console.log(err)
    });
  }else {
    merge(store.category)
  }
}
Init()
</script>

<style scoped lang='less'>
.wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(18% - 10px), 1fr));
  grid-gap: 26px;
  padding: 0 50px 100px;
}
</style>